<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        html,body{width:100%;height: 100%;overflow:hidden;font-family: "微软雅黑";font-size:50px;margin:0;padding:0}
        p,ul,li{font-size: 16px;}
        div,img{width:100%;display: block;}
        li{list-style: none;}

        .videoPage{width: 100%; height: 100%; position: relative; top: 0; left: 0; overflow: hidden}
        .wrap{width: 100%; height: 100%; position: absolute; top: 0; left: 0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;}
        .bg{width: 100%; height: 100%; background: #fff; position: absolute;}
        .title{width: 7.5rem; height: 1.22rem; position: fixed; top: 0; left: 0; z-index: 10;}
        .open1{width: 1.32rem; height: 0.56rem; position: fixed; top: 0.26rem; left: 5.88rem; z-index: 11;}
        /*.video{width: 7.5rem; height: 5.2rem; position: relative; margin-top: 1.3rem; display: none}*/
        /*.audio{width: 7.5rem; height: 5.2rem; position: relative; margin-top: 1.3rem; border-bottom: 0.01rem solid #e0e1e2; display: none}*/
        /*.audio audio{width: 7.5rem; height: 5.2rem;background:#000 url(images/music_brackground.gif) no-repeat center center;background-size:7.5rem 1.1rem;}*/
        /*audio::-webkit-media-controls-enclosure{width: 7.5rem; background: white; border-radius: 0;}*/
        /*.name{width: 7rem; font-size: 0.34rem; color: #000; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; margin-top: 0.2rem; margin-left: 0.25rem;}*/
        /*.contentName{width: 1.6rem; height: 0.32rem; line-height: 0.32rem; font-size: 0.32rem; color: #000; font-weight: 600; text-indent: 0.2rem; position: relative; margin-top: 0.4rem; margin-left: 0.25rem;}*/
        /*.contentName::before{content: '';width: 0.08rem; height: 0.3rem; position: absolute; top: 0; left: 0; background: #F98660;}*/
        .content{width: 100%; height: 90%; margin-top: 1.3rem; position: absolute;}
        .content::-webkit-scrollbar{display: none;}
        .open2{width: 1.92rem;height: 0.64rem;position: fixed; bottom: 1.3rem;left: 50%;transform: translateX(-50%);}
        .open3{width: 7.5rem; height: 1.07rem; position: fixed; bottom: 0; left: 0; z-index: 11;}
        .btnOpen3{width: 2rem; height: 1rem; position: fixed; bottom: 0; right: 0; z-index: 11;}
    </style>
</head>
<body>
<div class="videoPage">
    <div class="title"><img src="images/title.png"></div>
    <div class="open1"><img src="images/open1.png" alt=""></div>
    <div class="wrap">
        <div class="bg"></div>
        <!--<div class="video">-->
            <!--<video class="vjs-tech" width="100%" height="100%" controls="controls" autoplay="autoplay" x-webkit-airplay="true" x5-video-player-fullscreen="true" preload="auto" playsinline="true" webkit-playsinline x5-video-player-typ="h5">-->
                <!--<source type="application/x-mpegURL" src="">-->
            <!--</video>-->
        <!--</div>-->
        <!--<div class="audio">-->
            <!--&lt;!&ndash;<audio src="audio/wenhe.mp3"></audio>&ndash;&gt;-->
            <!--<audio autoplay="autoplay" controls id="bgMusic" src=""></audio>-->
        <!--</div>-->
        <!--<div class="name">撒大苏打三大阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿撒</div>-->
        <!--<div class="contentName">课程介绍</div>-->
        <!--<div class="content"></div>-->
        <iframe class="content" src="http://h5.ruiccm.com/lymp/month17/index.html" frameborder="0" scrolling="no"></iframe>
    </div>
    <div class="open2"><img src="images/open2.png" alt=""></div>
    <div class="open3"><img src="images/open3.png" alt=""></div>
    <div class="btnOpen3"></div>
</div>
<script>
    document.getElementsByTagName("html")[0].style.fontSize=window.innerWidth/750*100+"px";

    init();
    openApp();
    function init(){

        var content = document.getElementsByClassName("content")[0];
        // var video = document.getElementsByClassName("video")[0];
        // var audio = document.getElementsByClassName("audio")[0];
        // video.style.display = 'block';
        // if (false){
        //     video.style.display = 'block';
        //     audio.style.display = 'none';
        // } else{
        //     audio.style.display = 'block';
        //     video.style.display = 'none';
        // }
    }

    function openApp(){
        var open1 = document.getElementsByClassName("open1")[0];
        var open2 = document.getElementsByClassName("open2")[0];
        var btnOpen3 = document.getElementsByClassName("btnOpen3")[0];
        // var url ='';
        // if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
        //
        //     url ="cocolion://?test=sss";
        // } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android
        //
        //     url ="kekeshi://com.babytown.cocolion";
        // } else {
        //     url =" ";
        // };
        //
        // open1.addEventListener("click",function(){
        //     console.log('open1');
        //
        //     window.location.href = url;
        // })
        // open2.addEventListener("click",function(){
        //     console.log('open2');
        //     window.location.href = url;
        // })
        // btnOpen3.addEventListener("click",function(){
        //     console.log('btnOpen3');
        //     // window.location.href = url;
        //     submitFn();
        // })
    }
</script>
</body>
</html>